"use client"
import { forwardRef } from "react"
import { CheckCircle2, Circle, Calendar, TrendingUp } from "lucide-react"
import type { Todo, Language } from "@/types"

interface ExportCardProps {
  todos: Todo[]
  currentLang: Language
}

const ExportCard = forwardRef<HTMLDivElement, ExportCardProps>(({ todos, currentLang }, ref) => {
  const t = currentLang.translations
  const today = new Date()
  const todayString = today.toLocaleDateString(currentLang.code === "zh" ? "zh-CN" : "en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  })

  const totalTasks = todos.length
  const completedTasks = todos.filter((todo) => todo.completed).length
  const pendingTasks = totalTasks - completedTasks
  const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0

  const createdToday = todos.filter((todo) => {
    const createdDate = todo.createdAt.toDateString()
    return createdDate === today.toDateString()
  })

  const completedToday = todos.filter((todo) => {
    if (!todo.completedAt) return false
    const completedDate = todo.completedAt.toDateString()
    return completedDate === today.toDateString()
  })

  return (
    <div
      ref={ref}
      className="bg-gradient-to-br from-blue-50 to-indigo-100 p-8 rounded-2xl shadow-lg max-w-md mx-auto"
      style={{ width: "450px", minHeight: "600px" }}
    >
      {/* Header */}
      <div className="text-center mb-6">
        <h1 className="text-3xl font-bold text-orange-400 mb-2 flex items-center justify-center gap-2">
          TODO <span className="text-purple-400">🔗</span>
        </h1>
        <div className="flex items-center justify-center gap-2 text-gray-600 text-sm">
          <Calendar className="w-4 h-4" />
          <span>{todayString}</span>
        </div>
      </div>

      {/* Statistics */}
      <div className="bg-white rounded-xl p-4 mb-6 shadow-sm">
        <div className="flex items-center justify-center gap-2 mb-3">
          <TrendingUp className="w-5 h-5 text-blue-600" />
          <span className="font-semibold text-gray-800">
            {currentLang.code === "zh" ? "今日统计" : "Today's Stats"}
          </span>
        </div>

        <div className="grid grid-cols-3 gap-4 text-center">
          <div>
            <div className="text-2xl font-bold text-blue-600">{totalTasks}</div>
            <div className="text-xs text-gray-600">{t.totalTasks}</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-green-600">{completedTasks}</div>
            <div className="text-xs text-gray-600">{t.completedTasks}</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-orange-600">{pendingTasks}</div>
            <div className="text-xs text-gray-600">{t.pendingTasks}</div>
          </div>
        </div>

        {/* Progress bar */}
        <div className="mt-4">
          <div className="flex justify-between text-sm text-gray-600 mb-1">
            <span>{t.completionRate}</span>
            <span>{completionRate}%</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-gradient-to-r from-blue-500 to-green-500 h-2 rounded-full transition-all duration-300"
              style={{ width: `${completionRate}%` }}
            ></div>
          </div>
        </div>
      </div>

      {/* Today's Activity */}
      <div className="bg-white rounded-xl p-4 shadow-sm">
        <h3 className="font-semibold text-gray-800 mb-3 text-center">
          {currentLang.code === "zh" ? "今日活动" : "Today's Activity"}
        </h3>

        <div className="space-y-4">
          {createdToday.length > 0 && (
            <div>
              <div className="text-sm text-green-600 font-medium mb-2">
                ✨ {t.tasksCreated}: {createdToday.length}
              </div>
              <div className="space-y-2">
                {createdToday.slice(0, 4).map((todo) => (
                  <div key={todo.id} className="text-xs text-gray-600 flex items-start gap-2">
                    <Circle className="w-3 h-3 mt-0.5 flex-shrink-0" />
                    <span className="break-words leading-relaxed">{todo.text}</span>
                  </div>
                ))}
                {createdToday.length > 4 && (
                  <div className="text-xs text-gray-500">
                    {currentLang.code === "zh"
                      ? `还有 ${createdToday.length - 4} 个...`
                      : `+${createdToday.length - 4} more...`}
                  </div>
                )}
              </div>
            </div>
          )}

          {completedToday.length > 0 && (
            <div>
              <div className="text-sm text-blue-600 font-medium mb-2">
                ✅ {t.tasksCompleted}: {completedToday.length}
              </div>
              <div className="space-y-2">
                {completedToday.slice(0, 4).map((todo) => (
                  <div key={todo.id} className="text-xs text-gray-600 flex items-start gap-2">
                    <CheckCircle2 className="w-3 h-3 mt-0.5 text-green-600 flex-shrink-0" />
                    <span className="break-words leading-relaxed line-through">{todo.text}</span>
                  </div>
                ))}
                {completedToday.length > 4 && (
                  <div className="text-xs text-gray-500">
                    {currentLang.code === "zh"
                      ? `还有 ${completedToday.length - 4} 个...`
                      : `+${completedToday.length - 4} more...`}
                  </div>
                )}
              </div>
            </div>
          )}

          {createdToday.length === 0 && completedToday.length === 0 && (
            <div className="text-center text-gray-500 text-sm py-4">
              {currentLang.code === "zh" ? "今天还没有活动记录" : "No activity today"}
            </div>
          )}
        </div>
      </div>

      {/* Footer */}
      <div className="text-center mt-6 text-xs text-gray-500">
        {currentLang.code === "zh" ? "每日进步，成就更好的自己" : "Daily progress, better yourself"}
      </div>
    </div>
  )
})

ExportCard.displayName = "ExportCard"

export default ExportCard
